<template>
	<view class="payment-container">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="/static/icon/导航.png" class="back-icon" />
			</view>
			<text class="title">订单支付</text>
			<view class="right-placeholder"></view>
		</view>
		
		<view class="order-info">
			<view class="order-title">
				<text class="order-type">{{businessTypeName}}</text>
				<text class="order-amount">¥ {{amount}}</text>
			</view>
			<view class="order-detail">
				<view class="detail-item">
					<text class="item-label">订单编号</text>
					<text class="item-value">{{orderNo}}</text>
				</view>
				<view class="detail-item">
					<text class="item-label">创建时间</text>
					<text class="item-value">{{createTime}}</text>
				</view>
				<view class="detail-item" v-if="remark">
					<text class="item-label">备注信息</text>
					<text class="item-value">{{remark}}</text>
				</view>
			</view>
		</view>
		
		<view class="payment-methods">
			<view class="section-title">支付方式</view>
			<view class="method-list">
				<view class="method-item" :class="{ 'active': paymentMethod === 'wechat' }" @click="selectPayment('wechat')">
					<view class="method-left">
						<image src="/static/icon/微信支付.png" class="method-icon" mode="aspectFit"></image>
						<text class="method-name">微信支付</text>
					</view>
					<view class="method-right">
						<view class="checkbox" :class="{ 'checked': paymentMethod === 'wechat' }"></view>
					</view>
				</view>
				
				<view class="method-item" :class="{ 'active': paymentMethod === 'balance' }" @click="selectPayment('balance')">
					<view class="method-left">
						<image src="/static/icon/余额.png" class="method-icon" mode="aspectFit"></image>
						<text class="method-name">余额支付</text>
						<text class="balance-amount">(可用余额: ¥{{userBalance}})</text>
					</view>
					<view class="method-right">
						<view class="checkbox" :class="{ 'checked': paymentMethod === 'balance' }"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="payment-action">
			<button class="pay-btn" @click="handlePayment">确认支付</button>
			<text class="cancel-btn" @click="cancelPayment">取消支付</text>
		</view>
		
		<!-- 支付确认弹窗 -->
		<view class="payment-confirm-modal" v-if="showConfirmModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">确认支付</text>
					<view class="close-icon" @click="showConfirmModal = false">×</view>
				</view>
				<view class="modal-body">
					<text class="confirm-text">确定使用{{paymentMethodName}}支付</text>
					<text class="confirm-amount">¥ {{amount}}</text>
				</view>
				<view class="modal-footer">
					<button class="confirm-btn" @click="confirmPayment">确认</button>
				</view>
			</view>
		</view>
		
		<!-- 支付中加载弹窗 -->
		<view class="loading-modal" v-if="isProcessing">
			<view class="loading-content">
				<view class="loading-icon"></view>
				<text class="loading-text">支付处理中...</text>
			</view>
		</view>
		
		<!-- 微信支付弹窗 -->
		<view class="wechat-payment-modal" v-if="showWechatPayModal">
			<view class="wechat-modal-content">
				<view class="wechat-modal-header">
					<text class="wechat-modal-title">微信支付</text>
					<view class="wechat-close-icon" @click="showWechatPayModal = false">×</view>
				</view>
				<view class="wechat-modal-body">
					<view class="wechat-payment-info">
						<view class="wechat-payment-amount">¥ {{amount}}</view>
						<view class="wechat-payment-desc">{{businessTypeName}}</view>
					</view>
					<view class="wechat-payment-icon">
						<image src="/static/icon/微信支付.png" class="wechat-icon" mode="aspectFit"></image>
					</view>
					<view class="wechat-payment-tips">请确认支付金额无误后点击确认支付</view>
				</view>
				<view class="wechat-modal-footer">
					<button class="wechat-cancel-btn" @click="cancelWechatPay">取消支付</button>
					<button class="wechat-success-btn" @click="simulateWechatPaySuccess">确认支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request';

export default {
	data() {
		return {
			// 支付相关信息
			businessType: '', // order-订单支付, recharge-充值支付
			businessId: '', // 业务ID(订单ID或充值记录ID)
			orderNo: '', // 订单号
			amount: 0, // 支付金额
			remark: '', // 备注
			createTime: '', // 创建时间
			
			// 用户信息
			userBalance: '0.00', // 用户余额
			
			// 支付方式
			paymentMethod: 'wechat', // wechat-微信支付, balance-余额支付
			
			// 控制显示
			showConfirmModal: false, // 确认支付弹窗
			isProcessing: false, // 是否处理中
			showWechatPayModal: false, // 微信支付弹窗
		}
	},
	computed: {
		// 业务类型名称
		businessTypeName() {
			const typeMap = {
				'order': '订单支付',
				'reservation': '棋牌室预约',
				'recharge': '账户充值',
				'coupon': '优惠券购买'
			};
			// 直接返回类型映射，如果不存在则使用当前业务类型
			return typeMap[this.businessType] || this.businessType;
		},
		// 支付方式名称
		paymentMethodName() {
			const methodMap = {
				'wechat': '微信',
				'balance': '余额'
			};
			return methodMap[this.paymentMethod] || '微信';
		}
	},
	onLoad(options) {
		// 获取传入的参数
		this.businessType = options.type || 'order'; // 业务类型
		this.businessId = options.id || ''; // 业务ID
		
		// 初始余额支付方式仅在订单支付时可用
		if (this.businessType === 'recharge') {
			this.paymentMethod = 'wechat';
		}
		
		// 加载支付信息
		this.loadPaymentInfo();
		
		// 获取用户余额
		this.getUserBalance();
	},
	methods: {
		/**
		 * 返回上一页
		 */
		goBack() {
			uni.navigateBack();
		},
		async updateCouponStatus() {
			let couponId = uni.getStorageSync('coupon_id');
			// 更新优惠券状态
			const res = await request.post(`/api/mobile/coupon/updateStatus`, { couponId });
			if (res.success) {
				console.log('优惠券状态更新成功');
			} else {
				console.log('优惠券不存在');
			}
		},
		/**
		 * 加载支付信息
		 */
		async loadPaymentInfo() {
			try {
				uni.showLoading({
					title: '加载中...'
				});
				
				// 根据业务类型获取不同接口的数据
				let url = '';
				const businessId = this.businessId;
				
				// 确保使用后端实际支持的API路径格式
				if (this.businessType === 'order') {
					// 订单详情使用查询参数
					url = `/api/mobile/order/detail?orderId=${businessId}`;
				} else if (this.businessType === 'reservation') {
					// 预约详情使用路径参数
					url = `/api/mobile/reservation/detail/${businessId}`;
				} else if (this.businessType === 'recharge') {
					// 充值详情使用路径参数
					url = `/api/mobile/order/detail?orderId=${businessId}`;
				} else if (this.businessType === 'coupon') {
					// 优惠券订单使用订单API
					url = `/api/mobile/order/detail?orderId=${businessId}`;
				}
				
				console.log(`请求支付信息URL: ${url}, 业务ID: ${businessId}`);
				
				try {
					if (!businessId) {
						throw new Error('业务ID为空');
					}
					
					const res = await request.get(url);	
					if (res.code === 200 && res.data) {
						console.log('获取支付信息成功:', res.data);
						
						// 使用接口返回的数据
						// 优先使用直接返回的orderNo字段，其次是order_no
						this.orderNo = res.data.orderNo || res.data.order_no || '';
						
						// 如果订单号仍然为空，退出支付流程
						if (!this.orderNo) {
							console.error('订单号为空，无法继续支付流程');
							uni.showToast({
								title: '订单信息不完整，无法完成支付',
								icon: 'none',
								duration: 2000
							});
							// 返回上一页
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
							return;
						}
						
						this.amount = parseFloat(res.data.amount || 0).toFixed(2);
						this.createTime = res.data.createTime || res.data.create_time || this.formatTime(new Date());
						this.remark = res.data.remark || (
							this.businessType === 'reservation' ? '棋牌室预约' : 
							(this.businessType === 'order' ? '订单支付' : '账户充值')
						);
					} else {
						console.warn('API返回异常:', res);
						uni.showToast({
							title: '获取支付信息失败',
							icon: 'none',
							duration: 2000
						});
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					}
				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: '获取支付信息失败',
						icon: 'none',
						duration: 2000
					});
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
				}
				
				uni.hideLoading();
			} catch (error) {
				uni.hideLoading();
				console.error('获取支付信息异常:', error);
				uni.showToast({
					title: '获取支付信息失败',
					icon: 'none',
					duration: 2000
				});
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 2000);
			}
		},
		
		/**
		 * 生成订单编号
		 */
		generateOrderNo() {
			const prefix = this.businessType === 'reservation' ? 'YY' : 
						(this.businessType === 'order' ? 'DD' : 'CZ');
			
			const timestamp = Date.now().toString();
			const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
			
			return `${prefix}${timestamp}${random}`;
		},
		
		/**
		 * 获取用户余额
		 */
		async getUserBalance() {
			try {
				const res = await request.get('/api/mobile/user/profile');
				
				if (res.code === 200 && res.data) {
					// 使用接口返回的数据
					this.userBalance = typeof res.data.balance === 'number' ? 
						res.data.balance.toFixed(2) : parseFloat(res.data.balance || 0).toFixed(2);
					console.log('获取到用户余额:', this.userBalance);
				} else {
					console.warn('获取余额API返回异常');
					uni.showToast({
						title: '获取余额信息失败',
						icon: 'none',
						duration: 2000
					});
					// 设置余额为0，防止使用余额支付
					this.userBalance = '0.00';
				}
			} catch (error) {
				console.error('获取用户余额失败:', error);
				uni.showToast({
					title: '获取余额信息失败',
					icon: 'none',
					duration: 2000
				});
				// 设置余额为0，防止使用余额支付
				this.userBalance = '0.00';
			}
		},
		
		/**
		 * 选择支付方式
		 */
		selectPayment(method) {
			// 充值不能使用余额支付
			if (this.businessType === 'recharge' && method === 'balance') {
				uni.showToast({
					title: '充值不能使用余额支付',
					icon: 'none'
				});
				return;
			}
			
			// 余额不足时不能使用余额支付
			if (method === 'balance' && parseFloat(this.userBalance) < parseFloat(this.amount)) {
				uni.showToast({
					title: '余额不足，请充值后再使用',
					icon: 'none'
				});
				return;
			}
			
			this.paymentMethod = method;
		},
		
		/**
		 * 处理支付
		 */
		async handlePayment() {
			// 如果选择余额支付，检查余额是否充足
			if (this.paymentMethod === 'balance') {
				const balance = parseFloat(this.userBalance);
				const amount = parseFloat(this.amount);
				
				if (balance < amount) {
					uni.showToast({
						title: '余额不足，请先充值或选择其他支付方式',
						icon: 'none',
						duration: 2000
					});
					return;
				}
			}
			
			// 显示确认弹窗
			this.showConfirmModal = true;
		},
		
		/**
		 * 确认支付
		 */
		async confirmPayment() {
			this.showConfirmModal = false;
			
			if (this.paymentMethod === 'wechat') {
				// 微信支付
				await this.processWechatPayment();
			} else if (this.paymentMethod === 'balance') {
				// 余额支付
				await this.processBalancePayment();
			}
		},
		
		/**
		 * 处理微信支付
		 */
		async processWechatPayment() {
			try {
				this.isProcessing = true;
				console.log('准备发起微信支付请求...');
				
				// 保存业务类型和业务ID到本地，确保支付回调能正确处理
				uni.setStorageSync('CURRENT_BUSINESS_TYPE', this.businessType);
				uni.setStorageSync('CURRENT_BUSINESS_ID', this.businessId);
				
				// 如果是优惠券类型，转换为充值类型，并记录原始类型
				let actualBusinessType = this.businessType;
				if (this.businessType === 'coupon') {
					actualBusinessType = 'recharge';
					// 记录原始类型，便于前端展示
					uni.setStorageSync('ORIGINAL_BUSINESS_TYPE', 'coupon');
				}
				
				const paymentData = {
					businessType: actualBusinessType,
					businessId: this.businessId,
					amount: parseFloat(this.amount),
					remark: this.businessType === 'coupon' ? '购买优惠券' : this.remark
				};
				
				console.log('发送支付请求数据:', paymentData);
				
				try {
					// 调用微信支付创建接口 - 使用原始支付路由路径
					const res = await request.post('/api/mobile/pay/wechat/create', paymentData);
					
					if (res.code === 200 && res.data) {
						console.log('创建微信支付成功:', res.data);
						// 记录支付ID等信息
						try {
							const paymentInfo = {
								payment_id: res.data.payment_id,
								order_id: res.data.order_id || this.businessId, // 保存服务器返回的订单ID
								business_type: this.businessType,
								payment_method: 'wechat',
								start_time: new Date().toISOString()
							};
							uni.setStorageSync('CURRENT_PAYMENT_INFO', JSON.stringify(paymentInfo));
							
							// 如果服务器返回了订单ID，保存到本地用于后续支付
							if (res.data.order_id) {
								uni.setStorageSync('CURRENT_ORDER_ID', res.data.order_id);
							}
							 // 调用提取的函数更新优惠券状态
							await this.updateCouponStatus();
						} catch (e) {
							console.log('记录支付信息失败:', e);
						}
						
						this.isProcessing = false;
						
						// 显示微信支付弹窗
						this.showWechatPayModal = true;
					} else {
						console.warn('创建微信支付返回异常:', res);
						uni.showToast({
							title: res.message || '支付创建失败',
							icon: 'none',
							duration: 2000
						});
						this.isProcessing = false;
						return; // 终止支付流程
					}
				} catch (apiError) {
					console.error('微信支付API调用失败:', apiError);
					uni.showToast({
						title: '支付服务不可用，请稍后再试',
						icon: 'none',
						duration: 2000
					});
					this.isProcessing = false;
					return; // 终止支付流程
				}
			} catch (error) {
				console.error('处理微信支付异常:', error);
				uni.showToast({
					title: '支付处理异常，请稍后再试',
					icon: 'none',
					duration: 2000
				});
				this.isProcessing = false;
				return; // 终止支付流程
			}
		},
		
		/**
		 * 模拟微信支付成功
		 */
		async simulateWechatPaySuccess() {
			try {
				this.showWechatPayModal = false;
				this.isProcessing = true;
				
				// 模拟支付成功结果
				const paymentResult = {
					status: 'success',
					payment_id: `WX_${Date.now()}`,
					transaction_id: `TRX_${Date.now()}`,
					order_id: this.businessId,
					coupon_id: uni.getStorageSync('COUPON_ID') || '' // 获取本地存储的优惠券ID
				};
				
				console.log('模拟支付结果:', paymentResult);
				
				// 提交支付结果
				try {
					const submitted = await this.submitPaymentResult(paymentResult);
					
					this.isProcessing = false;
					
					// 如果提交成功，跳转到结果页
					if (submitted) {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 1500
						});
						// 调用提取的函数更新优惠券状态
						await this.updateCouponStatus();
						// 跳转到支付结果页
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/payment/result?status=success&orderId=${this.businessId}`
							});
						}, 1500);
					}
				} catch (paymentError) {
					// 检查错误对象是否实际是成功响应
					if (paymentError && typeof paymentError === 'object' && 
						(paymentError.success === true || 
						(paymentError.message && paymentError.message.includes('成功')))) {
						console.log('检测到成功响应被当作错误:', paymentError);
						
						// 处理为成功
						this.isProcessing = false;
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 1500
						});
						
						// 跳转到支付结果页
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/payment/result?status=success&orderId=${this.businessId}`
							});
						}, 1500);
						return;
					}
					
					this.isProcessing = false;
					console.error('模拟支付异常:', paymentError);
					uni.showToast({
						title: '支付处理异常，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				}
			} catch (error) {
				this.isProcessing = false;
				console.error('模拟支付异常:', error);
				uni.showToast({
					title: '支付处理异常，请稍后再试',
					icon: 'none',
					duration: 2000
				});
			}
		},
		
		/**
		 * 向后端提交支付结果
		 */
		async submitPaymentResult(paymentResult) {
			try {
				console.log('准备向后端提交支付结果:', paymentResult);
				
				// 获取支付业务类型和业务ID
				const businessType = uni.getStorageSync('CURRENT_BUSINESS_TYPE') || this.businessType;
				const businessId = paymentResult.order_id || uni.getStorageSync('CURRENT_BUSINESS_ID') || this.businessId;
				
				// 如果是优惠券类型，转换为充值类型
				let actualBusinessType = businessType;
				if (businessType === 'coupon') {
					actualBusinessType = 'recharge';
				}
				
				// 组装回调数据
				const callbackData = {
					payment_id: paymentResult.payment_id || '',
					status: paymentResult.status || 'success',
					orderId: businessId, // 使用保存的业务ID
					transaction_id: paymentResult.transaction_id || '',
					amount: parseFloat(this.amount || 0), // 添加金额参数
					businessType: actualBusinessType, // 使用经过处理的业务类型
					coupon_id: paymentResult.coupon_id || uni.getStorageSync('COUPON_ID') || '' // 添加优惠券ID
				};
				
				console.log('向后端提交的支付回调数据:', callbackData);
				
				// 根据业务类型调用不同的回调接口
				if (businessType === 'coupon') {
					// 优惠券支付回调
					const couponId = paymentResult.coupon_id || uni.getStorageSync('COUPON_ID') || '';
					callbackData.couponId = couponId; // 添加优惠券ID
					console.log('调用优惠券支付回调接口:', callbackData);
					
					try {
						const res = await request.post(`/api/mobile/coupon/payment/${businessId}/success`, callbackData);
						// 优惠券接口返回的是success字段而不是code
						if (res.success) {
							console.log('优惠券支付结果提交成功:', res.data);
							return true;
						} else {
							console.warn('优惠券支付结果返回异常:', res);
							uni.showToast({
								title: res.message || '支付状态更新失败',
								icon: 'none',
								duration: 2000
							});
							return false;
						}
					} catch (couponError) {
						// 特殊处理：检查错误对象是否实际上是成功响应
						console.error('优惠券支付回调错误:', couponError);
						
						// 如果错误对象看起来像成功响应
						if (couponError && typeof couponError === 'object' && couponError.success === true) {
							console.log('检测到成功响应被当作错误:', couponError);
							// 这实际上是成功的
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 2000
							});
							return true;
						}
						
						uni.showToast({
							title: '优惠券支付状态更新失败',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
				} else {
					// 其他普通支付回调
					try {
						const res = await request.post('/api/mobile/pay/wechat/callback', callbackData);
						
						if (res.code === 200 || res.success) {
							console.log('支付结果提交成功:', res.data);
							
							// 如果返回了订单ID，保存下来用于后续查询
							if (res.data && res.data.order_id) {
								uni.setStorageSync('CURRENT_ORDER_ID', res.data.order_id);
							}
							
							return true;
						} else {
							console.warn('支付结果提交返回异常:', res);
							uni.showToast({
								title: '支付状态更新失败',
								icon: 'none',
								duration: 2000
							});
							return false;
						}
					} catch (payError) {
						console.error('支付回调API调用失败:', payError);
						uni.showToast({
							title: '支付状态更新失败',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
				}
			} catch (error) {
				console.error('提交支付结果失败:', error);
				uni.showToast({
					title: '支付状态更新失败',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
		},
		
		/**
		 * 处理余额支付
		 */
		async processBalancePayment() {
			try {
				this.isProcessing = true;
				
				// 检查余额是否充足
				const balance = parseFloat(this.userBalance);
				const amount = parseFloat(this.amount);
				
				if (balance < amount) {
					uni.showToast({
						title: '余额不足，请先充值',
						icon: 'none',
						duration: 2000
					});
					this.isProcessing = false;
					return;
				}
				
				console.log('准备发起余额支付请求...');
				
				const paymentData = {
					businessType: this.businessType,
					businessId: this.businessId,
					amount: amount
				};
				
				console.log('发送余额支付请求数据:', paymentData);
				
				try {
					// 调用余额支付接口
					const res = await request.post('/api/mobile/pay/balance', paymentData);
					
					if (res.code === 200 && res.data) {
						console.log('余额支付成功:', res.data);
						
						// 更新用户余额
						this.userBalance = (balance - amount).toFixed(2);
						
						// 显示成功提示
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000
						});
						// 调用提取的函数更新优惠券状态
						await this.updateCouponStatus();
						// 跳转到支付结果页
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/payment/result?status=success&orderId=${this.businessId}`
							});
						}, 1500);
					} else {
						console.warn('余额支付接口返回异常:', res);
						uni.showToast({
							title: res.message || '支付失败，请稍后重试',
							icon: 'none',
							duration: 2000
						});
						this.isProcessing = false;
						return; // 终止支付流程
					}
				} catch (apiError) {
					console.error('余额支付API调用失败:', apiError);
					uni.showToast({
						title: '支付服务不可用，请稍后再试',
						icon: 'none',
						duration: 2000
					});
					this.isProcessing = false;
					return; // 终止支付流程
				}
			} catch (error) {
				console.error('处理余额支付异常:', error);
				uni.showToast({
					title: '支付处理异常，请稍后再试',
					icon: 'none',
					duration: 2000
				});
				this.isProcessing = false;
				return; // 终止支付流程
			}
		},
		
		/**
		 * 取消支付
		 */
		cancelPayment() {
			uni.navigateBack();
		},
		
		/**
		 * 格式化时间
		 */
		formatTime(date) {
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			const hour = date.getHours().toString().padStart(2, '0');
			const minute = date.getMinutes().toString().padStart(2, '0');
			
			return `${year}-${month}-${day} ${hour}:${minute}`;
		},
		
		/**
		 * 取消微信支付
		 */
		cancelWechatPay() {
			this.showWechatPayModal = false;
			uni.showToast({
				title: '已取消支付',
				icon: 'none',
				duration: 1500
			});
		}
	}
}
</script>

<style>
page {
	background-color: #f5f5f5;
	min-height: 100%;
}

.payment-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* 顶部导航 */
.header {
	height: 180rpx;
	background-color: #7FB992;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 80rpx 30rpx 0;
}

.back-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
}

.back-icon {
	width: 40rpx;
	height: 40rpx;
	transform: rotate(180deg);
}

.title {
	color: #FFFFFF;
	font-size: 36rpx;
	font-weight: 500;
}

.right-placeholder {
	width: 60rpx;
}

/* 订单信息 */
.order-info {
	margin: 30rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
}

.order-title {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #F5F5F5;
}

.order-type {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
}

.order-amount {
	font-size: 36rpx;
	color: #FF6B6B;
	font-weight: bold;
}

.order-detail {
	padding: 20rpx 30rpx;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
}

.item-label {
	font-size: 28rpx;
	color: #999999;
}

.item-value {
	font-size: 28rpx;
	color: #333333;
}

/* 支付方式 */
.payment-methods {
	margin: 30rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
	margin-bottom: 30rpx;
}

.method-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #F5F5F5;
}

.method-item:last-child {
	border-bottom: none;
}

.method-left {
	display: flex;
	align-items: center;
}

.method-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
}

.method-name {
	font-size: 30rpx;
	color: #333333;
}

.balance-amount {
	font-size: 26rpx;
	color: #999999;
	margin-left: 10rpx;
}

.checkbox {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #DDDDDD;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkbox.checked {
	background-color: #7FB992;
	border-color: #7FB992;
	position: relative;
}

.checkbox.checked::after {
	content: '';
	width: 20rpx;
	height: 10rpx;
	border-left: 4rpx solid #FFFFFF;
	border-bottom: 4rpx solid #FFFFFF;
	transform: rotate(-45deg);
	position: absolute;
	left: 8rpx;
	top: 12rpx;
}

/* 支付按钮 */
.payment-action {
	margin: 60rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pay-btn {
	width: 100%;
	height: 90rpx;
	background-color: #7FB992;
	color: #FFFFFF;
	border-radius: 45rpx;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cancel-btn {
	margin-top: 30rpx;
	font-size: 28rpx;
	color: #999999;
}

/* 确认支付弹窗 */
.payment-confirm-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.modal-content {
	width: 80%;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
}

.modal-header {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #F5F5F5;
}

.modal-title {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
}

.close-icon {
	width: 40rpx;
	height: 40rpx;
	font-size: 40rpx;
	color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-body {
	padding: 40rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.confirm-text {
	font-size: 30rpx;
	color: #333333;
	margin-bottom: 20rpx;
}

.confirm-amount {
	font-size: 48rpx;
	color: #FF6B6B;
	font-weight: bold;
}

.modal-footer {
	padding: 30rpx;
	border-top: 1rpx solid #F5F5F5;
}

.confirm-btn {
	width: 100%;
	height: 80rpx;
	background-color: #7FB992;
	color: #FFFFFF;
	border-radius: 40rpx;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 加载中弹窗 */
.loading-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.loading-content {
	width: 200rpx;
	height: 200rpx;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.loading-icon {
	width: 60rpx;
	height: 60rpx;
	border: 4rpx solid #FFFFFF;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

.loading-text {
	font-size: 26rpx;
	color: #FFFFFF;
}

/* 微信支付弹窗 */
.wechat-payment-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.wechat-modal-content {
	width: 80%;
	max-width: 600rpx;
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
}

.wechat-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #f0f0f0;
}

.wechat-modal-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.wechat-close-icon {
	font-size: 40rpx;
	color: #999;
	padding: 10rpx;
}

.wechat-modal-body {
	padding: 40rpx 30rpx;
}

.wechat-payment-info {
	text-align: center;
	margin-bottom: 30rpx;
}

.wechat-payment-amount {
	font-size: 50rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.wechat-payment-desc {
	font-size: 28rpx;
	color: #666;
}

.wechat-payment-icon {
	display: flex;
	justify-content: center;
	margin: 30rpx 0;
}

.wechat-icon {
	width: 120rpx;
	height: 120rpx;
}

.wechat-payment-tips {
	text-align: center;
	font-size: 28rpx;
	color: #666;
	margin-top: 20rpx;
}

.wechat-modal-footer {
	display: flex;
	border-top: 1px solid #f0f0f0;
}

.wechat-cancel-btn {
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
	background-color: #f8f8f8;
	border-radius: 0;
}

.wechat-success-btn {
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 32rpx;
	color: #fff;
	background-color: #07c160;
	border-radius: 0;
}

.wechat-loading-icon {
	width: 50rpx;
	height: 50rpx;
	margin: 0 auto;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #07c160;
	border-radius: 50%;
	animation: spin 2s linear infinite;
	display: none;
}

.wechat-loading-text {
	display: block;
	text-align: center;
	font-size: 28rpx;
	color: #666;
	margin-top: 20rpx;
	display: none;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
</style> 